{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% macro hero_image(low_res_img, high_res_img, class_name) -%}
  {{ picture(
    url=low_res_img,
    sources=[
      {
        'media': '(min-width: 1024px)',
        'srcset': {
          low_res_img: '480w',
          high_res_img: '960w'
        }
      },
      {
        'media': '(max-width: 1023px)',
        'srcset': {
          'img/placeholder.png': 'default'
        }
      }
    ],
    optional_attributes={
      'class': class_name,
      'width': '480',
      'height': '480'
    }
  ) }}
{%- endmacro %}

{% macro vpn_hero(heading, subheading, desc) -%}
<section class="vpn-hero">
  <div class="mzp-l-content mzp-t-content-xl">
    <div class="vpn-hero-container">
      <div class="vpn-hero-body">
        <h1 class="vpn-hero-heading">{{ heading }}</h1>
        <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
        <div class="vpn-hero-desc">
          <p>{{ desc }}</p>
          {{ caller() }}
        </div>
      </div>
      <div class="vpn-hero-image hide-from-legacy-ie">
        {{ hero_image(
          'img/products/vpn/landing/vpn-hero-01.png',
          'img/products/vpn/landing/vpn-hero-01-high-res.png',
        ) }}
      </div>
    </div>
  </div>
</section>
{%- endmacro %}

{% macro vpn_platform_hero(heading, subheading, desc, image) -%}
<section class="vpn-hero">
  <div class="mzp-l-content mzp-t-content-xl">
    <div class="vpn-hero-container">
      <div class="vpn-hero-body">
        <h1 class="vpn-hero-heading">{{ heading }}</h1>
        <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
        <div class="vpn-hero-desc">
          <p>{{ desc }}</p>
          {{ caller() }}
        </div>
      </div>
      <div class="vpn-hero-image">
        {{ image }}
      </div>
    </div>
  </div>
</section>
{%- endmacro %}

{% macro vpn_conditional_cta_refresh(position) -%}
  <div class="c-aside {{ position }} mzp-l-content mzp-t-content-xl">
    {% if vpn_available %}
      <p>
        {% set pricing_url = '#pricing' if request.path.endswith('/products/vpn/') else url('products.vpn.landing') + '#pricing' %}
        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ pricing_url }}" data-cta-text="Get Mozilla VPN" data-cta-position="{{ position }}" data-testid="get-mozilla-vpn-{{ position }}-button">
          {{ ftl('vpn-shared-subscribe-link') }}
        </a>
      </p>
      {% if not mobile_sub_only %}
        <p class="c-guarantee">{{ ftl('vpn-shared-features-guarantee') }}</p>
      {% endif %}
    {% else %}
      <p>
        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-testid="join-waitlist-{{ position }}-button">
          {{ ftl('vpn-shared-waitlist-link') }}
        </a>
      </p>
    {% endif %}
  </div>
{%- endmacro %}

{% macro vpn_nav_cta_refresh() -%}
  <div class="vpn-nav-cta">
    {% if vpn_available %}
      {% set pricing_url = '#pricing' if request.path.endswith('/products/vpn/') else url('products.vpn.landing') + '#pricing' %}
      <a class="mzp-c-button mzp-t-secondary mzp-t-product mzp-t-md" href="{{ pricing_url }}" data-cta-text="Get Mozilla VPN" data-cta-position="navigation" data-testid="get-mozilla-vpn-nav-button">
        {{ ftl('vpn-shared-subscribe-link') }}
      </a>
    {% else %}
      <a class="mzp-c-button mzp-t-secondary mzp-t-product mzp-t-md" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-cta-position="navigation" data-testid="join-waitlist-nav-button">
        {{ ftl('vpn-shared-waitlist-link') }}
      </a>
    {% endif %}
  </div>
{%- endmacro %}

{% macro vpn_content_block(class_name=None, use_custom_body=False) -%}
<div class="vpn-content-block {% if class_name %}{{ class_name }}{% endif %}">
  {% if use_custom_body %}
    {{ caller() }}
  {% else %}
    <div class="vpn-content-block-container">
      {{ caller() }}
    </div>
  {% endif %}
</div>
{%- endmacro %}

{% macro vpn_nav_platform_cta(alt_link_text) -%}
  <div class="vpn-nav-cta">
    <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="{{ url('products.vpn.landing') }}">
      {{ ftl(alt_link_text) }}
    </a>
  </div>
{%- endmacro %}

{% macro vpn_resource_center_cta(referral_id, link_text, alt_link_text, class_name) -%}
  <div class="vpn-nav-cta">
    {% if vpn_available %}
      {{ vpn_product_referral_link(
        referral_id=referral_id,
        page_anchor='#pricing',
        link_text=link_text,
        class_name=class_name,
        optional_attributes= {
          'data-cta-text' : 'Get Mozilla VPN',
          'data-cta-type' : 'vpn',
        }
      ) }}
    {% else %}
      <a class="{{ class_name }}" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-cta-position="navigation">
        {{ alt_link_text }}
      </a>
    {% endif %}
  </div>
{%- endmacro %}
